import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../../utils/bt_tool_utils.dart';
import '../../utils/bt_app_bar_utils.dart';
import '../models/bt_pay_success_model.dart';

@RoutePage(name: "paySuccessRoute")
class BtPaySuccessScreen extends StatelessWidget {
  const BtPaySuccessScreen({super.key, required this.coins, required this.orderNo});

  final String coins;

  final String orderNo;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BtPaySuccessModel(),
      child: Consumer<BtPaySuccessModel>(builder: (context, model, _) {
        return Scaffold(
          backgroundColor: const Color(0xFFF6F7F8),
          appBar: appBar(context, 'Order Notifications', null),
          body: Container(
            padding: const EdgeInsets.only(left: 20, right: 20),
            child: Column(
              children: [
                Container(
                  margin: const EdgeInsets.only(top: 20, bottom: 16),
                  padding: const EdgeInsets.only(top: 13, bottom: 30),
                  decoration: BoxDecoration(
                    color: const Color(0xFFFFFFFF),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Column(
                    children: [
                      Image.asset(
                        'assets/images/bt_order_pay_success.png',
                        width: 175,
                        height: 133,
                      ),
                      const Padding(
                        padding: EdgeInsets.only(top: 12, bottom: 30),
                        child: Text('Thank you for your choice',
                            style: TextStyle(fontSize: 16, color: Color(0xFF8A63F0))),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset(
                            'assets/images/bt_icon_coin.png',
                            width: 44,
                            height: 47,
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 6),
                            child: Text(coins,
                                style: const TextStyle(
                                    fontSize: 32, color: Color(0xFF404040), fontWeight: FontWeight.bold)),
                          )
                        ],
                      )
                    ],
                  ),
                ),
                Container(
                  padding: const EdgeInsets.only(left: 16, top: 18, right: 16, bottom: 18),
                  decoration: BoxDecoration(
                    color: const Color(0xFFFFFFFF),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          const Text('Order Number：',
                              style: TextStyle(fontSize: 12, color: Color(0x80000000))),
                          Padding(
                            padding: const EdgeInsets.only(left: 4),
                            child: Text(orderNo,
                                style: const TextStyle(
                                    fontSize: 10, color: Color(0xFF404040), fontWeight: FontWeight.normal)),
                          )
                        ],
                      ),
                      const SizedBox(height: 8),
                      Row(
                        children: [
                          const Text('Creation time：',
                              style: TextStyle(fontSize: 12, color: Color(0x80000000))),
                          Padding(
                            padding: const EdgeInsets.only(left: 4),
                            child: Text(
                                formatTimestampToYearMonthDayHourMinute(
                                    DateTime.now().millisecondsSinceEpoch),
                                style: const TextStyle(
                                    fontSize: 10, color: Color(0xFF404040), fontWeight: FontWeight.normal)),
                          )
                        ],
                      )
                    ],
                  ),
                ),
                const SizedBox(height: 132),
                InkWell(
                  child: Container(
                      width: 327,
                      height: 48,
                      decoration: BoxDecoration(
                        color: const Color(0xFF4DB4FF),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: const Padding(
                        padding: EdgeInsets.only(top: 12),
                        child: Text("Define",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontSize: 16, color: Color(0xFFFFFFFF), fontWeight: FontWeight.bold)),
                      )),
                  onTap: () {
                    context.router.pop();
                  },
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}
